
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自动生成100个方块</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			li { list-style: none; }
			input { display: block; margin: 20px auto 10px; width: 300px; height: 30px; font-size: 16px; line-height: 30px; color: #FFFFFF; background: #000000; border: none; }
			input:hover { color: red; background: blue; }
			ul { width: 560px; margin: 0 auto; position: relative; }
			li { width: 50px; height: 50px; position: absolute; left: 0; top: 0; color: #000000; font-size: 30px; line-height: 50px; border: 1px solid #000000; text-align: center; }
		</style>
		<script type="text/javascript">
			window.onload = function (){
				//获取所有需要的元素
				var oBtn = document.getElementById('btn');
				var oUl = document.getElementById('list');
				var aLi = oUl.getElementsByTagName('li');
				//可能需要的自定义变量
				var onOff = true;
				var num1 = 0;
				var num2 = 0;
				var str = "";
				var colors = ['red','yellow','blue','green'];

				oBtn.onclick = function (){
					//为按钮添加防重复点击开关
					if(onOff){
						//首先要生成100个li,并且让li中添加从1开始的数字
						for(var i=0; i<100; i++){
							str += '<li>' + (i+1) +'</li>';
						}
						//生成完毕后存入自定义数组str中，然后将内存中str的数据赋值给ul
						oUl.innerHTML = str;
						
						for(var i=0; i<100; i++){
							//为每隔4个li添加一组颜色，顺序为红 黄 蓝 绿(0 1 2 3)
							if(num1<4){
								aLi[i].style.backgroundColor = colors[num1];
								num1 ++;
							}else{
								num1 = 0;
								aLi[i].style.backgroundColor = colors[num1];
							}
							//也可以取模法来做：aLi[i].style.backgroundColor = colors[i%4];
							//将100个li分为10组，每组从左到右的left，从0开始每个加60px
							aLi[i].style.left = i%10*60 + 'px';
							//分好10组后，每组是重叠的，将每组的top值依次加上每组的编号*60px，所以这里自定义一个数字变量
							//num2,让它初始等于0，每次li的编号可以整除10，就让num2自己加1，注意由于0%10也是0，所以
							//第一组需要的编号是1，所以这里应该用 ++num2，使num2在使用的时候先+1 再赋值
							if(i%10 == 0){
									++num2;
							}
							aLi[i].style.top = (num2-1)*60 + 'px';
						}
					}
					onOff = false; 
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="自动生成100个方块" />
		<ul id="list"></ul>
	</body>
</html>
